<template>
  <div class="p_relative" style="background: #193997;height: 100%;">
    <div id="lottie" class="w-100" style="position: absolute;z-index: 2;left: -450px;top: 140px;" :style="{height:clientHeight-200+'px'}"></div>
    <div class="loginWrap p_absolute" >
      <div class="login_banner d-flex justify-content-center align-items-center p_relative" style="z-index: 2;">
        <img class="p_relative" style="z-index: 2" src="~static/image/login_logo.png" width="1366" height="56">
<!--        <h1 class="ml-2">瑞斯康智慧照明管理平台</h1>-->
      </div>
      <!--动画背景-->
      <div class="mark" style="z-index: 2;"></div>
          <!--地图--->
      <!--    <div class="earthWrap">
            <div class="item" ref="earth"></div>
            <div class="item"></div>
          </div>-->
      <div class="user_form" style="z-index: 3">
        <ul class="w-100 h-100 loginBorder p_absolute">
          <li class="p_absolute" v-for="index in 4"></li>
        </ul>
        <div class="user_form_body p_relative" >
          <h2>用户登录</h2>
          <div class="el-input__wrap p_relative">
            <i class="icon icon-user"></i>
            <el-tooltip :content="errors.first('username')" :value="errors.has('username')" :manual="true">
              <el-input ref="inputName" v-model="form.username" placeholder="用户名" :readonly="isReadOnly"  @focus="focusInput"
              :class="{'is-error':errors.has('username')}" v-validate="'required'" name="username"></el-input>
            </el-tooltip>
          </div>
          <div class="el-input__wrap p_relative">
            <i class="icon icon-pwd"></i>
            <el-tooltip :content="errors.first('pwd')" :value="errors.has('pwd')" :manual="true">
              <el-input type="password" v-model="form.pwd" placeholder="密码" :readonly="isReadOnly"  @focus="focusInput"
              :class="{'is-error':errors.has('pwd')}" v-validate="'required'" name="pwd"></el-input>
            </el-tooltip>
          </div>
          <div class="d-flex justify-content-between">
            <div class="el-input__wrap p_relative w250">
              <i class="iconfont icon-yanzhengma font24" style="margin-top: -12px;"></i>
              <el-tooltip :content="errors.first('code')" :value="errors.has('code')" :manual="true">
                <el-input v-model="form.code" placeholder="校验码" :readonly="isReadOnly"  @focus="focusInput"
                :class="{'is-error':errors.has('code')}" v-validate="'required'" name="code"></el-input>
              </el-tooltip>
            </div>
            <img :src="codeImg" style="height: 50px;" @click="getCodeImg">
          </div>

          <div class="d-flex justify-content-between">
            <label>
              <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
            </label>
            <label class="txt_blue6 font16">忘记密码</label>
          </div>
          <el-button class="ur-btn loginBtn" @click="login">登录</el-button>
        </div>
      </div>
      <!--粒子动画--->
      <video height="250" src="./粒子02.mp4" autoplay="autoplay" loop="loop" class="w-100" style="object-fit: fill;position:fixed;bottom:0;z-index: 1;"></video>
    </div>
  </div>

</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'
  import lottie from 'lottie-web';
  import earthData from "./earthData";

  export default {
    components: {},
    props: {},
    data() {
      return {
        lottie:{},
        form:{pwd:'',username:'',code:''},
        rememberPwd:false,
        isReadOnly:true,
        codeImg:'',
        guid:''
      }
    },
    watch: {},
    computed: mapState({
      clientHeight:state=>state.comm.clientHeight
    }),
    methods: {
      getCodeImg(){
        this.guid=this.common.guid()
        this.codeImg=api.ajaxServe + 'User/VerifyCode?guid=' + this.guid;
      },
      focusInput() {
        this.isReadOnly = false;
      },
      login(){
        this.$validator.validateAll().then((res) => {
          if (!res) return
          api.fetchSimple('/User/Login',{guid:this.guid,...this.form}).then(r=>{
            if(r==''){
              return this.getCodeImg()
            }else{
              this.$store.commit('user/SET_USER_TOKEN', r.token)
              this.$store.commit('user/SET_USER_INFO', {userName:r.userName,RoleType:r.RoleType,limits:r.rights})
              this.$router.push('/main')
            }
          })
        })
      },
    },
    created() {
      this.getCodeImg()
      /*let _this=this
      setTimeout(()=>{
        _this.$refs.earth.style.animation='earth-translateY 3s linear infinite alternate'
      },2000)*/
    },
    mounted() {
      this.lottie = lottie.loadAnimation({
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        animationData: earthData.data
      })
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  // url('~assets/image/login/login_bg.png') repeat
  .loginWrap {width: 100%;height:100%; background:#193997;color :#fff;padding:100px 0 0;
    .login_banner{
      &::after{position:fixed;top:5px;content:url("~assets/image/login/guang.png");}
      h1{font-size:54px;letter-spacing:5px;ext-shadow: 6px 6px 8px 0px rgba(0,0,0,0.3);position:relative;z-index:2;}
    }
    .mark{width: 337px;height: 363px;margin:0 auto; position: absolute; left: 100px;top: 0;background: url('~assets/image/main/img_0.png') no-repeat; background-size: 100% 100%;
      animation:mark-scale 3s linear infinite alternate}
    .earthWrap{position:absolute;top:200px;left:150px;display:flex;flex-direction:columns ;justify-content:center;
      //地球
      .item:first-child{ width:484px;height 471px;
        //,earth-translateY 2s linear infinite alternate
        background:url('~assets/image/login/img_1.png') no-repeat; animation:earth-scale 2s;
      }
      .item:last-child{ width:877px;height :478px;position:absolute;top:200px;opacity:0.3;
        background:url('~assets/image/login/img_0.png') no-repeat;
      }
    }
    .user_form{position:fixed;top:50%;margin-top:-215px;right:200px;width:499px;height:484px;text-align:center;background: rgba(0, 184, 255, 0.1);
      h2{font-size:38px;letter-spacing:1px;font-weight:500;margin-bottom:30px;}
      .loginBorder li{width:39px;height:38px;
        &:nth-child(1){top:0;left:0;background: url("~assets/image/login/b_tl.png") no-repeat;}
        &:nth-child(2){right:0;top:0;background: url("~assets/image/login/b_tr.png") no-repeat;}
        &:nth-child(3){left:0;bottom:0;background: url("~assets/image/login/b_bl.png") no-repeat;}
        &:nth-child(4){right:0;bottom:0;background: url("~assets/image/login/b_br.png") no-repeat;}
      }
      .user_form_body{width:403px;height:380px;margin:-200px auto 0;top:50%;
        .el-checkbox__inner{
            background:transparent;
          }
        .el-checkbox__label{
          font-size:16px;color:#fff;
        }
      }
      .el-input__wrap{margin-bottom:20px;
        i{
          position :absolute;z-index:10;top:50%;left:22px;
        }
      }
      .el-input__inner{background: rgba(0, 75, 119, 0.6) !important;height:50px;
        line-height:50px;color:#fff;font-size:20px;font-weight:400; text-indent :70px;}
      .icon-user{width: 21px;height: 23px;background: url("~assets/image/login/user.png") no-repeat; margin-top:-11px;}
      .icon-pwd{width: 22px;height: 26px;background: url("~assets/image/login/pwd.png") no-repeat;margin-top:-13px;}
    }
    .loginBtn{width:403px;height:56px;line-height:56px;margin-top:40px;background: url("~assets/image/login/login_btn.png") no-repeat;
      span{font-size:26px;}
    }
    input::-webkit-input-placeholder {color: #fff !important;}
  }
  @keyframes earth-scale{
    0%{ opacity:0; transform:scale(0)}
    100%{ opacity:100%; transform:scale(1)}
  }
  @keyframes earth-translateY{
    0%{ transform:translateY(0px)}
    100%{ transform:translateY(30px)}
  }


</style>
